<template>
  <div>
    <!-- 位置栏 -->
    <div class="location-bar">
      <div>位置 :&ensp;</div>
      <div>一级页面</div>
      <div style="color: #000">/二级页面</div>
    </div>
    <!-- 查询框 -->
    <div class="search-bar">
      <a-form-model layout="inline" :model="searchForm" @submit="searchSubmit" @submit.native.prevent>
        <a-form-model-item label="创建日期:">
          <a-range-picker valueFormat="yyyy-MM-DD HH:mm:ss" v-model="searchForm.creationdate" />
        </a-form-model-item>
        <a-form-model-item label="更新日期:">
          <a-range-picker valueFormat="yyyy-MM-DD HH:mm:ss" v-model="searchForm.updatedate" />
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-select show-search placeholder="请选择" style="width: 150px" v-model="searchForm.status">
            <a-select-option value="上架">上架</a-select-option>
            <a-select-option value="下架">下架</a-select-option>
          </a-select>
        </a-form-model-item>
        <br />
        <a-form-model-item label="上架日期:">
          <a-range-picker valueFormat="yyyy-MM-DD HH:mm:ss" v-model="searchForm.launchdate" />
        </a-form-model-item>
        <a-form-model-item label="下架日期:">
          <a-range-picker valueFormat="yyyy-MM-DD HH:mm:ss" v-model="searchForm.unlaunchdate" />
        </a-form-model-item>
        <a-form-model-item label="位置">
          <a-select show-search placeholder="请选择" style="width: 150px" v-model="searchForm.location">
            <a-select-option value="首页">首页</a-select-option>
            <a-select-option value="新闻资讯">新闻资讯</a-select-option>
            <a-select-option value="关于我们">关于我们</a-select-option>
            <a-select-option value="资源下载">资源下载</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 内容框 -->
    <div class="content-box">
      <div style="display: flex; justify-content: space-between; width: 280px">
        <a-button type="primary" @click="add_modal"> 新增 </a-button>
        <a-button type="primary" @click="batchShelves">批量上架</a-button>
        <a-button type="primary" @click="unbatchShelves">批量下架</a-button>
      </div>
    </div>
    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="data"
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(columns) => columns.id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="cover" slot-scope="text, record"><img :src="cdn + text" alt="" srcset="" style="width: 50px" @click="imgshow(record)" /></span>
      <span slot="sectionId" slot-scope="text">
        <template v-for="(col, index) in column">
          <span v-if="col.id == text ? true : false" :key="index">{{ col.title }}</span>
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="modify_modal(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="shelves(record)" v-if="record.status == '下架' ? true : false">上架</a>
        <a @click="unshelves(record)" v-if="record.status == '上架' ? true : false">下架</a>
        <a-divider type="vertical" />
        <a @click="del(record)" type="danger">删除</a>
      </span>
    </a-table>
    <!-- 新增表单 -->
    <a-modal :visible="add_visible" title="新增banner" okText="确认" cancel-text="取消" @ok="add_ok" @cancel="add_cancel">
      <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="addForm">
        <a-form-model-item label="选择位置" prop="location">
          <a-select show-search placeholder="请选择" v-model="form.location">
            <a-select-option value="首页">首页</a-select-option>
            <a-select-option value="新闻资讯">新闻资讯</a-select-option>
            <a-select-option value="关于我们">关于我们</a-select-option>
            <a-select-option value="资源下载">资源下载</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="banner图" prop="cover">
          <upload-widget v-model="form.cover"></upload-widget>
        </a-form-model-item>
        <a-form-model-item label="链接" prop="linkAddress">
          <a-input v-model="form.linkAddress" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 编辑表单 -->
    <a-modal :visible="edit_visible" title="编辑banner" okText="确认" cancel-text="取消" @ok="edit_ok" @cancel="edit_cancel">
      <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="editForm">
        <a-form-model-item label="选择位置" prop="location">
          <a-select show-search placeholder="请选择" v-model="form.location">
            <a-select-option value="首页">首页</a-select-option>
            <a-select-option value="新闻资讯">新闻资讯</a-select-option>
            <a-select-option value="关于我们">关于我们</a-select-option>
            <a-select-option value="资源下载">资源下载</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="banner图" prop="cover">
          <upload-widget v-model="form.cover"></upload-widget>
        </a-form-model-item>
        <a-form-model-item label="链接" prop="linkAddress">
          <a-input v-model="form.linkAddress" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 查看大图 -->
    <a-modal :visible="image" :footer="null" :closable="false" :maskClosable="true" @cancel="image_cancel">
      <div style="text-align: center"><img :src="cdn + imgs" alt="" srcset="" style="width: 400px" /></div>
    </a-modal>
  </div>
</template>

<script>
/**表头信息 */
const columns = [
  {
    title: '位置',
    dataIndex: 'location',
    key: 'location',
    scopedSlots: { customRender: 'location' },
  },
  {
    title: 'Banner',
    dataIndex: 'cover',
    key: 'cover',
    scopedSlots: { customRender: 'cover' },
  },
  {
    title: '创建日期',
    dataIndex: 'created',
    key: 'created',
    scopedSlots: { customRender: 'created' },
  },
  {
    title: '更新时间',
    key: 'updated',
    dataIndex: 'updated',
    scopedSlots: { customRender: 'updated' },
  },
  {
    title: '上架时间',
    key: 'status_on',
    dataIndex: 'status_on',
    scopedSlots: { customRender: 'status_on' },
  },
  {
    title: '下架时间',
    key: 'status_off',
    dataIndex: 'status_off',
    scopedSlots: { customRender: 'status_off' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      columns,
      data: [],
      searchForm: { creationdate: ['', ''], updatedate: ['', ''], status: undefined, launchdate: ['', ''], unlaunchdate: ['', ''], location: undefined }, //查询参数
      pagination: { pageSize: 10, total: 100, pageNum: 1, showSizeChanger: true }, //分页参数
      add_visible: false, //新增窗控制
      edit_visible: false,
      form: { location: '', cover: '', linkAddress: '', id: '' },
      del_id: '',
      newIds: [], //编辑id
      selectedRowKeys: [], //多选参数
      image: false,
      imgs: '', //图片地址
      rules: {
        location: [{ required: true, message: '请选择!', trigger: 'change' }],
        cover: [{ required: true, message: '请上传图片!', trigger: 'blur' }],
        linkAddress: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.loadArticleList();
  },
  methods: {
    //查询列表
    async loadArticleList() {
      let reqData = {
        createStartTime: this.searchForm.creationdate[0],
        createEndTime: this.searchForm.creationdate[1],
        updateStartTime: this.searchForm.updatedate[0],
        updateEndTime: this.searchForm.updatedate[1],
        shelveStartTime: this.searchForm.launchdate[0],
        shelveEndTime: this.searchForm.launchdate[1],
        unshelveStartTime: this.searchForm.unlaunchdate[0],
        unshelveEndTime: this.searchForm.unlaunchdate[0],
        location: this.searchForm.location,
        status: this.searchForm.status,
      };
      let reqParam = { pageNumber: this.pagination.pageNum, pageSize: this.pagination.pageSize };
      let searchUrl = `/banner/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      console.log(result);
      this.data = result.data.data;
      this.pagination.total = result.data.total; //总数
      console.log(this.data);
      this.search_empty();
    },
    //新增
    async newlyAdded() {
      let reqData = {
        linkAddress: this.form.linkAddress,
        title: '',
        cover: this.form.cover,
        location: this.form.location,
        status: '上架',
      };
      let saveUrl = `/banner/save`;
      let result = await this.axios.post(saveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.form_empty();
    },
    //编辑
    async modifyList() {
      let reqData = {
        linkAddress: this.form.linkAddress,
        cover: this.form.cover,
        location: this.form.location,
        id: this.form.id,
        status: '',
      };
      let updateUrl = `/banner/update`;
      let result = await this.axios.post(updateUrl, reqData);
      console.log(result);
      this.loadArticleList();
    },
    //上架
    async shelve() {
      let reqData = {};
      let reqParam = { bannersIds: this.newIds };
      let urlParam = `?bannersIds=${reqParam.bannersIds.join('&bannersIds=')}`;
      let shelveUrl = `/banner/shelve${urlParam}`;
      let result = await this.axios.get(shelveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.search_empty();
    },
    //下架
    async unshelve() {
      let reqData = {};
      let reqParam = { bannersIds: this.newIds };
      let urlParam = `?bannersIds=${reqParam.bannersIds.join('&bannersIds=')}`;
      let unShelveUrl = `/banner/unShelve${urlParam}`;
      let result = await this.axios.get(unShelveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.search_empty();
    },
    //删除
    async deleteList() {
      let reqData = {};
      let reqParam = { id: this.del_id };
      let deleteUrl = `/banner/delete/${reqParam.id}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      this.loadArticleList();
    },
    //搜索
    searchSubmit() {
      // console.log(this.searchForm);
      this.loadArticleList();
    },
    //新增
    add_modal() {
      this.add_visible = true;
    },
    //新增取消
    add_cancel() {
      this.add_visible = false;
      this.form_empty();
    },
    //新增确定
    add_ok() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.add_visible = false;
          this.newlyAdded();
        }
      });
    },
    //批量上架
    batchShelves() {
      // console.log(this.selectedRowKeys);
      this.newIds = this.selectedRowKeys;
      console.log(this.newIds);
      this.shelve();
    },
    //批量下架
    unbatchShelves() {
      this.newIds = this.selectedRowKeys;
      // console.log(this.newIds);
      this.unshelve();
    },
    //上架
    shelves(record) {
      this.newIds = [record.id];
      // console.log(this.newIds)
      this.shelve();
    },
    //下架
    unshelves(record) {
      this.newIds = [record.id];
      // console.log(this.newIds)
      this.unshelve();
    },
    //编辑
    modify_modal(record) {
      this.edit_visible = true;
      this.form.id = record.id;
      this.form.location = record.location;
      this.form.cover = record.cover;
      this.form.linkAddress = record.linkAddress;
    },
    edit_cancel() {
      this.edit_visible = false;
      this.form_empty();
    },
    edit_ok() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.edit_visible = false;
          this.modifyList();
        }
      });
    },
    //删除
    del(record) {
      this.del_id = record.id;
      this.deleteList();
    },
    //分页
    handleTableChange(pagination) {
      this.pagination.pageNum = pagination.current;
      this.loadArticleList();
    },
    //多选
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //清空搜索
    search_empty() {
      this.searchForm.creationdate = ['', ''];
      this.searchForm.updatedate = ['', ''];
      this.searchForm.launchdate = ['', ''];
      this.searchForm.unlaunchdate = ['', ''];
      this.searchForm.status = undefined;
      this.searchForm.location = undefined;
    },
    //清空form
    form_empty() {
      this.form.location = '';
      this.form.cover = '';
      this.form.linkAddress = '';
    },
    //清空多选
    multi_empty() {
      this.selectedRowKeys = [];
    },
    //点击图片
    imgshow(record) {
      this.image = true;
      this.imgs = record.cover;
      // console.log(this.imgs);
    },
    //关闭图片
    image_cancel() {
      this.image = false;
    },
  },
};
</script>

<style>
.location-bar {
  display: flex;
  font-size: 14px;
  color: #88898b;
}
.search-bar {
  width: 100%;
  height: 130px;
  background-color: #ffffff;
  margin-top: 17px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.content-box {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>